@import "_function";

.pay-page{
  s{
    text-decoration: none;
  }
  .header {
    .w(702);
    margin: 0 auto;
    i {
      .fs(50);
      color: #6a6a6a;
      display: inline-block;
      vertical-align: middle;
    }
    h4 {
      .fs(38);
      display: inline-block;
      vertical-align: middle;
      .ml(270)
    }
  }
  .contain {
    .w(702);
    margin: 0 auto;
    .info{
      .mt(30);
      .item{
        .fs(28);
        .lh(50);
        s{
          color: red;
        }
      }
    }
    .order-form{
      border-top: 1px solid #aaa;
      border-bottom: 1px solid #aaa;
      display: flex;
      .lh(70);
      justify-content: space-between;
    }
    .pay-way{
      div:first-child{
        .lh(60);
      }
      .item{
        display: flex;
        justify-content: space-between;
        div:last-child{
          vertical-align: bottom;
          .fs(40);
        }
        span{
          .w(138);
          .h(40);
          background-color: red;
          color: white;
        }
      }
    }
    .payment{
      .mb(60);
      .item{
        .lh(80);
        border-bottom: 1px solid #aaa;
        display: flex;
        justify-content: space-between;
        vertical-align: middle;
      }
      .item:first-child{
        border-top: 1px solid #aaa;
      }
      input{
        display: none;
      }
      i{
        vertical-align: middle;
        border: 1px solid #aaa;
        .w(40);
        .h(40);
        display: inline-block;
        border-radius: 50%;
        background-image: url("../../src/img/gou.png");
        background-repeat: no-repeat;
        background-position: center;
        .bgs(30,22);
      }
      input[type=radio] + i{
        .bgp(110,0)
      }
      input[type=radio]:checked + i{
        background-position: center;
        border: 1px solid #55cff4;
      }
    }
    button{
      .w(702);
      .w(702);
      .fs(38);
      .lh(86);
      text-align: center;
      background-color: red;
      color: white;
      border: transparent;
    }
  }
}
